<template>
  <div class="c-bg-white c-ph24 c-pt40">
    <div class="c-flex-row c-aligni-start" @click="goDetail(item.Id)" v-for="(item, index) in valuableCouponList" :key="index" :class="index == 0 ? '' : 'c-mt28'">
      <div class="c-ww240 c-hh160 c-br16 c-text-hidden c-p">
        <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.productImage && item.productImage.length > 0 ? item.productImage[0] : null, require('../../../assets/defult270.png'))" />
        <div class="c-fs16 c-fc-white c-ph4 c-hh24 c-br4 c-flex-row c-flex-center bg-black-opacity c-pa c-p-b10 c-p-r10">{{item.type == 1 ? '兑换券' : item.type == 2 ? '无门槛券' : item.type == 3 ? '满减券' : item.type == 4 ? '抵价券' : item.type == 5 ? '折扣券' : ''}}</div>
      </div>
      <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-pb24 c-bd-b1">
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.productName}}</div>
        <div class="c-fs22 c-fc-gray c-mt10 c-text-ellipsis1">{{item.scope}}</div>
        <div class="c-fs22 c-fc-gray c-mt10">
          {{item.type == 1 ? '兑换商品' : item.type == 4 ? '抵扣全额' : item.type == 5 ? (Number(item.amount) > 0 ? ('满' + Number(item.amount) + '元打' + Number(item.price) + '折') : ('无门槛打' + Number(item.price) + '折')) : (Number(item.amount) > 0 ? ('满' + Number(item.amount) + '元减' + Number(item.price) + '元') : '无使用门槛')}}
          <span v-if="item.type == 5 && !!item.enableTotalAmount == 1">{{ `，最高可减${item.totalAmount}元` }}</span>
        </div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-mt10">
          <div class="c-fs26 c-fc-xmlred c-fw600"><span v-if="item.productPrice > 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{Number(item.productPrice).toFixed(2) | moneyStr}}</div>
          <div class="c-fs20 c-fc-white c-ww110 c-hh40 c-flex-row c-flex-center c-br20 theme-bg">去抢购</div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (valuableCouponList && valuableCouponList.length > 0)" :noData="valuableCouponList.length == 0" :noDataText="'暂无结果'"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { COUPON_SCOPE_MAP } from "@/utils/constant.js";
let couponScopeMap = COUPON_SCOPE_MAP;
let limit = 10;

export default {
  name: 'ValuableCouponList',
  components: { loadingStatusTem, CoverImg },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      valuableCouponList: [],
      page: 1,
      is_page: false,
      isLoading: false
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    goDetail(cId) {
      this.$routerGo(this, "push", {
        path: "/member/myExchange/valuableCoupon",
        query: {id: cId}
      });
    },
    getList() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      utilJs.postMethod(`${global.apiurl}valuablecoupons/listValuableCoupon`, {limit: limit, page: this.page},
        res => {
          if (res.retData && res.retData.data && res.retData.data.length > 0) {
            res.retData.data.forEach(eItem => {
              if (eItem.type == 1) {
                eItem.scope = eItem.name;
              } else if (eItem.type == 4) {
                eItem.scope = "适用于预约师资功能";
              } else {
                if (eItem.redeemType == 27) {
                  eItem.prodTypes = eItem.prodTypes ? eItem.prodTypes.split(",") : '';
                  if (eItem.prodTypes && eItem.prodTypes.length > 0) {
                    for (let i = 0; i < eItem.prodTypes.length; i++) {
                      eItem.prodTypes[i] = couponScopeMap[eItem.prodTypes[i]];
                    }
                  }
                }
                eItem.scope = eItem.redeemType == 26 ? '全店商品可用' : (eItem.redeemType == 25 ? '适用于商城商品' : eItem.redeemType == 27 ? ('适用于' + (eItem.prodTypes ? eItem.prodTypes.join('、') : '')) : '指定商品可用')
              }
              try {
                eItem.productImage = JSON.parse(eItem.productImage)
              } catch (err) {
                console.log(err.message)
              }
            });
          }
          if (this.page == 1) {
            this.valuableCouponList = res.retData && res.retData.data ? res.retData.data : [];
          } else {
            this.valuableCouponList = this.valuableCouponList.concat(res.retData.data);
          }
          this.page = res.retData.data && (res.retData.data.length >= limit) ? (this.page + 1) : this.page;
          this.is_page = res.retData.data && (res.retData.data.length >= limit) ? true : false;
          this.isLoading = false;
        },
        failRes => {
          this.isLoading = false;
        }
      );
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc") || "点击查看详情";
      utilJs.wechatConfig(shareUrl, "有价优惠券", "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc") || "点击查看详情";
      utilJs.appShareTrue("有价优惠券", "", shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("有价券");// eslint-disable-line
    this.valuableCouponList = [];
    this.page = 1;
    this.is_page = false;
    this.isLoading = false;
    this.getList();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.bg-black-opacity{
  background: rgba(0,0,0,0.5);
}
</style>


